import React, { Component } from 'react';
import qs from 'qs';
import autoBind from 'react-autobind';
import { Tabs, WhiteSpace, Menu, Grid } from 'antd-mobile';

// style
import styles from './index.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

// widget
import CategoryGoods from './CategoryGoods';
import CategoryBrands from './CategoryBrands';

class CategoryBody extends Component {
	constructor(props) {
      super(props)
      autoBind(this)

      let searchParam = this.getSearchParam(props)
      this.state = {
      	tabKey: searchParam.tab === 'pinpai' ? '2' : '1'
      }
  	}
  	componentWillReceiveProps(nextProps) {
  		let searchParamNext = this.getSearchParam(nextProps)
  		let searchParam = this.getSearchParam(this.props)
        if(searchParam.tab != searchParamNext.tab) {
        	this.setState({
        		tabKey: searchParamNext.tab === 'pinpai' ? '2' : '1'
        	})
        }   
    }
  	componentDidMount() {
      const { dispatch } = this.props
      dispatch({
        type: 'meyley/fetchCategory'
      })
    }

    getSearchParam(props) {
    	const { dispatch, location } = props
        let searchParam = location.search.replace('?', '')
        searchParam = qs.parse(searchParam)

        return searchParam
    }
    onTabChange(tabKey) {
    	this.setState({
    		tabKey
    	})
    }
	render() {
    const { meyley } = this.props
	 	return (
	 		<div className={`category-body ${styles['category-body']}`}>
	 			<Tabs activeKey={this.state.tabKey} onChange={this.onTabChange} swipeable={false}>
		          	<Tabs.TabPane tab="分类" key="1">
    	              <CategoryGoods {...this.props} />
		          	</Tabs.TabPane>
		          	<Tabs.TabPane tab="品牌" key="2">
	                  <CategoryBrands {...this.props} />
		          	</Tabs.TabPane>
		        </Tabs>
	 		</div>
	  	);
	}
};

CategoryBody.propTypes = {
};

export default CategoryBody
